<template>
	<view class="">
		<!-- 页面内容开始 -->
		<el-row>
			<el-col :span="12">
				<div class="bg-white" style="margin-right: 5px;">
					<vk-data-page-header
						title="数据统计"
						subTitle="数据总览"
					></vk-data-page-header>
					<div class="tab-center u-s-20">
						<div>
							<div class="name">用户总数</div>
							<div class="num">{{detailData.user?detailData.user:0}}</div>
						</div>
						<div>
							<div class="name">作品总数</div>
							<div class="num">{{detailData.cover?detailData.cover:0}}</div>
						</div>
						<div>
							<div class="name">下载订单</div>
							<div class="num">{{detailData.down?detailData.down:0}}</div>
						</div>
						<div>
							<div class="name">兑换订单</div>
							<div class="num">{{detailData.change?detailData.change:0}}</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="bg-white" style="margin-left: 5px;">
					<vk-data-page-header
						title="待办事项"
						subTitle="待处理事件"
					></vk-data-page-header>
					<div class="tab-center u-s-20">
						<div>
							<div class="name">微信用户</div>
							<div class="num">{{detailData.wx?detailData.wx:0}}</div>
						</div>
						<div>
							<div class="name">QQ用户</div>
							<div class="num">{{detailData.qq?detailData.qq:0}}</div>
						</div>
						<div>
							<div class="name">抖音用户</div>
							<div class="num">{{detailData.tt?detailData.tt:0}}</div>
						</div>
						<div>
							<div class="name">快手用户</div>
							<div class="num">{{detailData.ks?detailData.ks:0}}</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div style="margin-top: 10px;"></div>
		<el-row>
			<el-col :span="15">
				<div class="bg-white" style="margin-right: 5px;">
					<vk-data-page-header
						title="最新订单"
						subTitle="还热乎的订单"
					></vk-data-page-header>
					<div class="u-p-20">
						<!-- 表格组件开始 -->
						<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"></vk-data-table>
						<!-- 表格组件结束 -->
					</div>
				</div>
			</el-col>
			<el-col :span="9">
				<div class="bg-white" style="margin-left: 5px;">
					<vk-data-page-header
						title="最新用户"
						subTitle="刚入坑的新用户"
					></vk-data-page-header>
					<div class="u-p-20">
						<!-- 表格组件开始 -->
						<vk-data-table ref="table2" :action="table2.action" :columns="table2.columns" :query-form-param="queryForm2"></vk-data-table>
						<!-- 表格组件结束 -->
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that;													// 当前页面对象
	var vk = uni.vk;									// vk实例
	
	export default {
		data() {
			// 页面数据变量
			return {
				detailData: {},
				// 字段显示规则
				table1: {
					// 表格数据请求地址
					action:"admin/wechat/order/sys/getList",
					// 表格字段显示规则
					columns: [
						{ key: "user.avatar", title: "用户ID", type: "avatar" },
						{ key: "user.nickname", title: "用户名", type: "text" },
						{ key: "mode", title: "类型", type: "text",
							formatter: function(val, row, column, index) {
								if(val === 0) return '静态壁纸'
								if(val === 1) return '头像'
								if(val === 2) return '动态壁纸'
								if(val === 5) return '表情包'
								if(val === 4) return '挂件'
							}
						},
						{ key: "image", title: "缩略图", type: "image" },
						{ key: "comment", title: "备注", type: "text" },
						{ key: "_add_time", title: "订单时间", type: "time", width:160 }
					]
				},
				queryForm1: {
					sortRule:[{ name:"_add_time", type:"desc" }],
				},
				// 表格相关开始 -----------------------------------------------------------
				table2:{
					// 表格数据请求地址
					action:"admin/system/user/sys/getList",
					// 表格字段显示规则
					columns: [
						{ key:"nickname", title:"昵称", type:"text" },
						{ key:"avatar", title:"头像", type:"avatar" },
						{ key:"gender", title:"性别", type:"html",
							formatter: function(val, row, column, index) {
								if(val === 0) return '未知'
								if(val === 1) return '男'
								if(val === 2) return '女'
							}
						},
						{ key:"register_date", title:"注册时间", type:"time", width:160 }
					],
					// 多选框选中的值
					multipleSelection:[],
					// 当前高亮的记录
					selectItem:"",
				},
				queryForm2: {
					sortRule:[{ name:"register_date", type:"desc" }],
				},
				// 表格相关结束 -----------------------------------------------------------
				// init请求返回的数据
				data:{

				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			async init(options){
				let data = await vk.callFunction({
					url: '/admin/wechat/index/sys/getList',
				});
				console.log(data)
				that.detailData = data
			},
			pageTo(path){
				vk.navigateTo(path);
			},
      load(e){
        console.log(1,e);
      },
      error(e){
        console.log(2,e);
      }
		},
		// 过滤器
		filters:{

		},
		// 计算属性
		computed:{

		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.tab-center{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.name{
		font-size: 13px;
		margin-bottom: 10px;
	}
	.num{
		font-size: 24px;
		color: #409eff;
	}
	.bg-white{
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}
	.u-p-20{
		padding: 20px;
	}
	.u-s-20{
		padding: 20px 40px;
	}
</style>
